<template>
    <el-header class="forbid-select header_main">
        <div class="menu-button cursor-pointer">
            <el-icon class="menu-button-icon" @click="emits('openMenu')">
                <component :is="getIcon('ChromeFilled')"></component>
            </el-icon>
        </div>
        <div style="width: 100%;justify-content: flex-end;display: inline-flex;position: relative;">
            <el-input class="input-auto-resize search-input" placeholder="输入关键字搜索文档" v-model="value"
                @input="showResult = false" @keyup.enter="remoteMethod">
                <template #suffix>
                    <el-icon class="el-input__icon search-icon" style="margin-left: 0;padding: 5px;"
                        @click="remoteMethod">
                        <search />
                    </el-icon>
                </template>
            </el-input>
            <transition name="animate__animated " enter-active-class="animate__fadeInDown animate__faster"
                leave-active-class="animate__fadeOutUp animate__faster" mode="out-in">
                <div class="search-result" v-if="showResult">
                    <el-scrollbar class="full-percent">
                        <ul class="el-dropdown-menu" style="background-color: rgb(169 169 169 / 90%)!important;">
                            <li v-for="item in options" style="padding: 10px;" @click="() => router.push(item.value)"
                                class="search-result-item cursor-pointer no-wrap" v-if="options.length">
                                {{ item.label }}
                            </li>
                            <li v-else style="padding: 10px;">暂无数据</li>
                        </ul>
                    </el-scrollbar>
                </div>
            </transition>
        </div>
        <div class="time-container flex-display-center tracking-in-expand">
            <div>{{ now.format('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>
    </el-header>
</template>
<script setup>
import { useNow } from '@vueuse/core'
import { getIcon } from "@/utils/tools"
import instance from "@/pinia"
import { Search } from "@element-plus/icons-vue"
import router from '@/router'

const { mainStore } = instance
let value = $ref("")
let options = $ref([])
let showResult = $ref(false)
const remoteMethod = () => {
    if (!value) return
    options = []
    Object.keys(mainStore.getPaths).filter(key => key.includes(value)).forEach(key => {
        Object.keys(mainStore.getPaths[key]).forEach(k => {
            mainStore.getPaths[key][k].tags.forEach(tag => {
                options.push({ value: "/" + tag + "/" + mainStore.getPaths[key][k].operationId, label: k?.toUpperCase() + " " + mainStore.getPaths[key][k].summary + " " + key })
            })
        })
    })

    for (let url of Object.keys(mainStore.getPaths)) {
        for (let method of Object.keys(mainStore.getPaths[url])) {
            const v = mainStore.getPaths[url][method]
            if (v.summary.includes(value)) {
                v.tags.forEach(tag => {
                    const option = { value: "/" + tag + "/" + v.operationId, label: method?.toUpperCase() + " " + v.summary + " " + url }
                    if (!options.find(item => item.value === option.value)) options.push(option)
                })
            }
        }
    }
    showResult = true
}

const { now } = useNow({ controls: true, interval: 1000 })
const emits = defineEmits(["openMenu"])

//关闭tagMenu的右击菜单
const closeMenu = (e) => {
    if (!document.querySelector(".search-input")?.contains(e.target)) showResult = false
}

watch(() => showResult, (visible) => {
    if (visible) {
        addEventListener('mouseup', closeMenu)
    } else {
        removeEventListener('mouseup', closeMenu)
    }
})

onMounted(() => {
    document.querySelector(".key-search .el-select__suffix")?.remove()
})

</script>
<style scoped>
.header_main {
    padding: 0 !important;
    height: 50px !important;
    opacity: 1 !important;
    width: 100%;
    background: rgba(255, 255, 255, .3);
    position: relative;
    backdrop-filter: var(--overlay-background-filter-blur);
    display: flex;
    align-items: center;
    transition: all .5s ease-in-out !important;
    animation-duration: 1s;
    z-index: 2;
}

.menu-button {
    width: calc(var(--font-size) * 3);
    height: 100%;
    display: flex;
    align-items: center;
}

.menu-button-icon {
    font-size: calc(var(--font-size) * 1.5);
    padding-left: 10px;
    color: rgb(30 135 213 / 70%);
}

.time-container {
    height: 100%;
    min-width: calc(var(--font-size) * 10);
}

.tracking-in-expand {
    animation: tracking-in-expand .7s cubic-bezier(.215, .61, .355, 1.000) both;
    animation-delay: .5s;
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -.5em;
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        opacity: 1
    }
}
</style>

<style>
.key-search .el-select__wrapper,
.key-search .el-select__wrapper.is-hovering {
    box-shadow: 0 -1px 0 0 var(--el-border-color) inset !important;
    border-color: transparent !important;
}

.key-search .el-select__wrapper:hover {
    /* box-shadow: 0 -1px 0 0 var(--el-border-color) inset; */
    box-shadow: none;
    border-color: transparent;
}

.key-search .el-select__wrapper:active {
    box-shadow: 0 -1px 0 0 var(--el-border-color) inset;
    border-color: transparent;
}

.key-search .el-input__inner {
    border: none !important;
    /* 去除输入框的边框 */
    box-shadow: none !important;
    /* 去除阴影 */
    border-color: transparent;
}

.key-search .el-input__suffix {
    display: none !important;
    /* 去除下拉箭头 */
    border-color: transparent;
}

.search-input {
    max-width: 300px !important;
    --el-border-color: transparent;
    --el-border-color-hover: transparent;
    border-bottom: 1px solid #bdbdbd8c;
}

.search-result {
    position: absolute;
    right: 0;
    border: 1px solid #dddddd;
    border-radius: 3px;
    width: fit-content;
    height: fit-content;
    top: 35px;
    max-width: 50vw;
    min-width: 300px;
    max-height: 50vh;
}

.search-result-item:hover {
    background-color: rgba(150, 150, 150, 0.5);
}

.search-result .el-scrollbar__wrap,
.search-result .full-precent {
    max-height: 50vh;
}
</style>
